<template>
	<u-popup v-model="popupShowStatus" mode="bottom" border-radius="15" closeable close-icon-color="#333333">
		<view class="u-padding-top-20 u-padding-bottom-20 xl bold u-text-center">业务标签</view>
		<view class="u-padding-25">
			<view class="u-flex">
				<text class="md u-color-F53F3F">*</text>
				<text class="nr u-padding-left-10 bold">您的业务范围（可多选）</text>
			</view>
			<view class="u-margin-top-10 xs u-color-666666">根据您的选择，为您精准匹配产品</view>
			<view class="business-area">
				<view v-for="(v,k) in businessDatas" :key="k">
					<view class="u-flex u-padding-top-30">
						<u-icon :name="v.icon||'grid-fill'" color="#82848a" :size="40"></u-icon>
						<text class="u-padding-left-10 bold nr">{{v.name||''}}</text>
					</view>
					<view class="business-lists-area u-margin-top-20">
						<view v-for="(item,index) in v.business" :key="index" @click="selectBusiness(item)" class="business-item u-text-center" :class="{'select':nowSelectBusinessIds.indexOf(item.id) != -1 }">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-area u-padding-25 u-flex">
			<view class="cancel-btn u-flex-1 u-margin-right-15 u-text-center" @click="popupShowStatus = false">
				取消
			</view>
			<view class="save-btn u-flex-2 u-margin-left-15 white u-text-center" @click="saveBusiness">
				保存
			</view>
		</view>
	</u-popup>
</template>
<script>
	import {
		queryBusinessDatas
	} from '@/api/userBusinessCard'
	export default {
		data() {
			return {
				popupShowStatus: false,
				businessDatas:[],
				nowSelectBusiness:[],
				nowSelectBusinessIds:[]
			}
		},
		props:{
			nowSelectIds: {
				default: () => []
			}
		},
		watch:{
			nowSelectIds:{
				deep: true,
				immediate: true,
				handler (val) {
					if(!Array.isArray(val))return;
					console.log(val)
					val.forEach((v)=>{
						this.nowSelectBusinessIds.push(v.id)
					})
					this.nowSelectBusiness = val;
				}
			}
		},
		created() {
			this.queryBusinessDatasFun()
		},
		methods: {
			async queryBusinessDatasFun(){
				let d = await queryBusinessDatas();
				if(d.code == 1)this.businessDatas = d.data
			},
			shiftPopupStatus(s) {
				this.popupShowStatus = s;
			},
			selectBusiness(d){
				if(this.nowSelectBusinessIds.indexOf(d.id) == -1){
					this.nowSelectBusinessIds.push(d.id)
					this.nowSelectBusiness.push(d)
				}else{
					this.nowSelectBusiness.slice(this.nowSelectBusinessIds.indexOf(d.id),1)
					this.nowSelectBusinessIds.slice(this.nowSelectBusinessIds.indexOf(d.id),1)
				}
			},
			saveBusiness(){
				this.popupShowStatus = false;
				this.$emit('selectBusinessCallback',this.nowSelectBusiness);
			}
		}
	}
</script>
<style lang="scss">
	.business-area {
		overflow: auto;
		max-height: 60vh;

		.business-lists-area {
			display: grid;
			row-gap: 20rpx;
			column-gap: 20rpx;
			grid-template-columns: 1fr 1fr 1fr 1fr;

			.business-item {
				color: #666666;
				padding: 15rpx 0;
				border-radius: 100rpx;
				background-color: rgba(26, 26, 26, 0.06);

				&.select {
					color: #0099FF;
					font-weight: bold;
					background-color: rgba(82, 185, 254, 0.12);
				}
			}
		}
	}


	.cancel-btn {
		color: #333;
		padding: 20rpx 0;
		font-weight: bold;
		border-radius: 100rpx;
		background-color: rgba(26, 26, 26, 0.06);
	}

	.save-btn {
		padding: 15rpx 0;
		background: #4B89EE;
		border-radius: 100rpx;
		box-shadow: 0 4rpx 0 #68B9FC;
	}
</style>